<template>
	<view class="">
		<u-navbar style="color: white;" autoBack title="我的持仓" leftIconColor="#ffffff" 
			:titleStyle="{color:'white'}" bgColor="#c30d23" :rightText="navRightText"
			placeholder @rightClick="navRightClick">
		</u-navbar>
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" lineColor="#c30d23" inactiveStyle="#837c7a" 
				activeStyle="font-weight:bold" :scrollable="false"
				@change="changeTabs"
			></u-tabs>
		</u-sticky>
		
		<template v-if="tabIndex === 0">
		<view class="list">
			<view class="item" v-for="(item,index) in dataList" :key="item.orderId">
				<view class="item-t flex-j-sb flex-a-c">
					<text class="tit">{{item.goodsName}}</text>
					<text class="status">{{item.direction ==0?'买入':'卖出'}}</text>
				</view>
				<view class="item-m flex-j-sb">
					<view class="item-m-i">
						<view class="item-m-i-row">
							<text class="txt">持有数量</text>
							<text>{{item.num}}</text>
						</view>
						<view class="item-m-i-row">
							<text class="txt">冻结数量</text>
							<text>0</text>
						</view>
						<view class="item-m-i-row">
							<text class="txt">可用数量</text>
							<text>{{item.num}}</text>
						</view>
					</view>
					<view class="item-m-i">
						<view class="item-m-i-row">
							<text class="txt">持仓均价</text>
							<text>{{ item.direction == 0?averagePriceA:averagePriceB }}</text>
						</view>
						<view class="item-m-i-row">
							<text class="txt">持仓金额</text>
							<text>{{item.price * item.num *100 || 0}}</text>
						</view>
						<view class="item-m-i-row">
							<text class="txt">参考损益</text>
							<text class="red">{{ item.direction == 0?profitA:profitB }}</text>
						</view>
					</view>
				</view>
				<view class="item-b flex-j-fe">
					<view class="btn" @tap="goExchange(0,item.direction)">转让</view>
					<view class="btn" @tap="goExchange(1,item.direction)">交收</view>
				</view>
			</view>
		</view>
		<view class="none">暂无数据</view>
		</template>
		<template v-if="tabIndex === 1">
			<view class="none">暂无数据</view>
		</template>
		
	</view>
</template>

<script>
	import { getUserOrder,getCurrentPrice } from '@/api/home.js'
	export default {
		data() {
			return {
				_isLoading:false,
				tabIndex:0,
				navRightText:'明细',
				list:[
					{name:'订单持仓'},
					{name:'现货持仓'}
				],
				averagePriceA:0, // 买入均价
				averagePriceB:0, // 卖出均价
				profitA:0, // 买入参考损益
				profitB:0, // 卖出参考损益
				currentPirce:0, // 现价
				dataList:[],
				page:1,
				size:10,
			}
		},
		onLoad() {
			this.getCurrPrice()
		},
		onReachBottom() {
			if(this._isLoading) return
			if((this.page * this.size) > this.dataList.length) return uni.$showToast('暂无更多数据')
			this.page++
			this.getData()
		},
		methods:{
			async getData(){ //  
				this._isLoading = true
				const res = await getUserOrder({
					// pageSize:this.size,
					// pageNum:this.page,
					type:0, // 订立 
				})
				this._isLoading = false
				// console.log(res);
				if(res.rows) {
					// this.dataList = this.dataList.concat(res.rows)
					this.dataList = res.rows
					let averagePriceA = 0 // 买入均价
					let averagePriceB = 0 // 卖出均价
					let totalA = 0 // 买入总数量
					let totalB = 0 // 卖出总数量
					res.rows.forEach(item =>{
						if(item.direction == 0) { // 买入
							averagePriceA += item.price * item.num
							totalA += item.num
						} else { // 卖出
							averagePriceB += item.price * item.num
							totalB += item.num
						}
					})
					this.averagePriceA = (averagePriceA / totalA).toFixed(2)
					this.averagePriceB = (averagePriceB / totalB).toFixed(2)
					this.profitA = ((this.currentPirce - this.averagePriceA) * 100).toFixed((2))
					this.profitB = ((this.averagePriceB - this.currentPirce) * 100).toFixed((2))
				}
			},
			async getCurrPrice(){ //
				const res = await getCurrentPrice()
				// console.log(1111,res);
				this.getData() // 因为要获取当前价做计算
				if(res.data && res.data.length) this.currentPirce = res.data[0].last
			},
			goExchange(type,num){ // num 持仓方向 0 为买入  1 为卖出
				if(type === 1) return // 交收不用做
				let url = './possess/makeOver?direction='+num
				if(type === 0) url += '&transfer=true' // 转让
				uni.navigateTo({
					url
				})
			},
			changeTabs(e){
				this.tabIndex = e.index
				e.index? this.navRightText = '':this.navRightText = '明细'
			},
			navRightClick(){
				if(this.tabIndex !== 0) return
				uni.navigateTo({
					url:'./myOrder/historyOrder?chicangDetail=true'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.list {
		font-size: 26rpx;
		padding: 20rpx;
		.item {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 5px;
			background-color: white;
			.item-t {
				.tit {
					font-weight: bold;
					font-weight: 30rpx;
				}
				.status {
					color: #1AA034;
				}
			}
			.item-m {
				margin: 20rpx 0px;
				.item-m-i {
					width: 45%;
					.item-m-i-row {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 5rpx;
						
					}
				}
			}
			.item-b {
				padding: 0px 10rpx;
				.btn {
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 30rpx;
					text-align: center;
					border: 1rpx solid #ddd;
					+.btn {
						margin-left: 30rpx;
					}
				}
			}
		}
		
		.txt {
			color: gray;
		}
		.red {
			color: #E20000;
		}
	}
	
	.none {
		font-size: 30rpx;
		margin-top: 100rpx;
		text-align: center;
	}
</style>